<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    
    <head>
        <title>AI功能中心 - 赋值科技</title>
        <meta charset="utf-8">
        <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
        <link rel="stylesheet" href="css/ui-box.css">
        <link rel="stylesheet" href="css/ui-base.css">
        <link rel="stylesheet" href="css/ui-color.css">
        <link rel="stylesheet" href="css/appcan.icon.css">
        <link rel="stylesheet" href="css/appcan.control.css">
        <link rel="stylesheet" href="css/appcan.tab.css">
        <link rel="stylesheet" href="ai_features/css/ai_features.css">
    </head>
    
    <body class="" ontouchstart>
        <div class="bc-bg" tabindex="0" data-control="PAGE" id="Page">
            <!-- 头部 -->
            <div class="uh bc-head ubb bc-border" data-control="HEADER" id="Header">
                <div class="ub">
                    <div class="nav-btn" id="nav-left">
                        <div class="fa fa-angle-left fa-2x"></div>
                    </div>
                    <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AI功能中心</h1>
                    <div class="nav-btn" id="nav-right">
                        <div class="fa fa-cog"></div>
                    </div>
                </div>
            </div>
            
            <!-- Tab 标签栏 -->
            <div class="ai-tabs" data-control="TAB" id="Tab">
                <div class="tab-nav ub">
                    <div class="ub-f1 tab-nav-item active" data-tab="ai-chat">
                        <i class="fa fa-robot"></i>
                        <span>AI问答</span>
                    </div>
                    <div class="ub-f1 tab-nav-item" data-tab="tech-news">
                        <i class="fa fa-newspaper-o"></i>
                        <span>科技新闻</span>
                    </div>
                </div>
                
                <!-- AI问答标签页 -->
                <div class="tab-content active" id="ai-chat">
                    <div class="chat-container">
                        <!-- AI助手头像区域 -->
                        <div class="ai-assistant-header">
                            <div class="ai-avatar-container">
                                <div class="ai-avatar-ring"></div>
                                <div class="ai-avatar">
                                    <i class="fa fa-robot"></i>
                                </div>
                            </div>
                            <h3 class="ai-title">AI智能助手</h3>
                            <p class="ai-subtitle">我可以为您解答各种科技问题</p>
                        </div>
                        
                        <!-- 快捷问题 -->
                        <div class="quick-questions">
                            <div class="quick-question" onclick="askQuickQuestion('什么是人工智能？')">
                                什么是人工智能？
                            </div>
                            <div class="quick-question" onclick="askQuickQuestion('5G技术的特点是什么？')">
                                5G技术的特点
                            </div>
                            <div class="quick-question" onclick="askQuickQuestion('云计算的优势有哪些？')">
                                云计算的优势
                            </div>
                            <div class="quick-question" onclick="askQuickQuestion('区块链如何工作？')">
                                区块链如何工作？
                            </div>
                        </div>
                        
                        <!-- 聊天消息区域 -->
                        <div class="chat-messages" id="chatMessages">
                            <!-- 消息会动态添加到这里 -->
                        </div>
                        
                        <!-- 输入区域 -->
                        <div class="chat-input-container">
                            <div class="chat-input-wrapper">
                                <input type="text" id="chatInput" class="chat-input" placeholder="输入您的问题..." maxlength="200">
                                <button class="send-btn" id="sendBtn" onclick="sendMessage()">
                                    <i class="fa fa-paper-plane"></i>
                                </button>
                            </div>
                            <div class="typing-indicator" id="typingIndicator">
                                <span>AI正在思考</span>
                                <div class="typing-dots">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 科技新闻标签页 -->
                <div class="tab-content" id="tech-news">
                    <div class="news-container">
                        <div class="news-header">
                            <h3>科技资讯</h3>
                            <p>最新科技动态与趋势</p>
                        </div>
                        
                        <div class="news-list" id="newsList">
                            <div class="news-item">
                                <div class="news-image">
                                    <i class="fa fa-microchip fa-2x"></i>
                                </div>
                                <div class="news-content">
                                    <h4>人工智能芯片技术突破</h4>
                                    <p>新一代AI芯片在性能和功耗方面取得重大突破，为边缘计算提供更强支持。</p>
                                    <span class="news-time">2024-01-15</span>
                                </div>
                            </div>
                            
                            <div class="news-item">
                                <div class="news-image">
                                    <i class="fa fa-wifi fa-2x"></i>
                                </div>
                                <div class="news-content">
                                    <h4>6G网络研发进展</h4>
                                    <p>全球主要运营商开始6G技术预研，预计2030年实现商用部署。</p>
                                    <span class="news-time">2024-01-14</span>
                                </div>
                            </div>
                            
                            <div class="news-item">
                                <div class="news-image">
                                    <i class="fa fa-cloud fa-2x"></i>
                                </div>
                                <div class="news-content">
                                    <h4>云原生技术发展趋势</h4>
                                    <p>容器化、微服务、DevOps等云原生技术成为企业数字化转型的核心。</p>
                                    <span class="news-time">2024-01-13</span>
                                </div>
                            </div>
                            
                            <div class="news-item">
                                <div class="news-image">
                                    <i class="fa fa-shield fa-2x"></i>
                                </div>
                                <div class="news-content">
                                    <h4>网络安全新挑战</h4>
                                    <p>随着物联网设备激增，网络安全面临前所未有的挑战和机遇。</p>
                                    <span class="news-time">2024-01-12</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script src="js/appcan.js"></script>
        <script src="js/appcan.control.js"></script>
        <script src="js/appcan.tab.js"></script>
        <script src="js/ai_features.js"></script>
    </body>
</html> 